<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/25
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>直播间管理 - 豆鲨后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="直播间管理 - 豆鲨后台管理系统">
    <meta name="description" content="直播间管理 - 豆鲨后台管理系统">
    <meta name="author" content="yinqi">
    <link href="${pageContext.request.contextPath}/doushahoutai/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/doushahoutai/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/doushahoutai/css/style.min.css" rel="stylesheet">
    <style>
        body{
            display: flex;
        }
        .layout-Module-container layout-Cover--single{
            display: flex-wrap;

        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <%--<li class="nav-item active"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>--%>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-account"></i>用户管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="${pageContext.request.contextPath}/front/showUser.jsp">所有用户</a> </li>
                                <li> <a href="${pageContext.request.contextPath}/front/addUser.jsp">用户新增</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-video"></i> 直播管理</a>
                            <ul class="nav nav-subnav"  style="display: block;">
                                <li class="active"> <a href="${pageContext.request.contextPath}/LiveController/BackLive">直播间管理</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-filmstrip"></i> 视频管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="${pageContext.request.contextPath}/video/skipVideoManage">所有视频</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-folder-open"></i>分类管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="${pageContext.request.contextPath}/LiveController/BackType">分类管理</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-cart-outline"></i>礼物管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="${pageContext.request.contextPath}/LiveController/BackGift">礼物管理</a> </li>
                                <li> <a href="${pageContext.request.contextPath}/LiveController/BackGiftRecord">礼物记录管理</a> </li>
                            </ul>
                        </li>
                        
                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. All rights reserved. More Templates：豆鲨</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 直播间管理 </span>
                    </div>

                    <ul class="topbar-right"  id="login1">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="${pageContext.request.contextPath}/doushahoutai/images/users/avatar.jpg" alt="笔下光年" />
                                <span>笔下光年 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>                      
                  </span>
                                    <span>                                                     
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>                      
                  </span>
                                    <span>                                                     
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>                      
                  </span>
                                    <span>                                                     
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>                      
                  </span>
                                    <span>                                                     
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>                      
                  </span>
                                    <span>                                                     
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">直播间 <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">直播间</a> </li>
                                                <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">主播</a> </li>
                                            </ul>
                                        </div>
                                        <input type="text" class="form-control" value="" id="keyword" name="keyword" placeholder="请输入名称">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="#!" data-toggle="modal" data-target="#myModal"><i class="mdi mdi-plus"></i> 新增</a>
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <h4 class="modal-title" id="myModalLabel">新增直播间</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form action="" method="post" class="row" id="formAdd">
                                                        <div class="form-group col-md-12">
                                                            <label for="roomName">房间标题</label>
                                                            <input type="text" class="form-control" id="roomName" name="roomName" value="" placeholder="请输入标题">
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="typeId">房间分类</label>
                                                            <div id="typeIdDiv" style="width: 570px;">
                                                            <input type="text" class="form-control" id="typeId" name="typeId" value="" placeholder="关键词">
                                                            <div id="typeList" style="position: fixed; width: 570px; height: 38px;background-color: white;z-index: 30;border: 1px solid;border-top: none;display: none;">
                                                                <ul id="typeListlu" style="list-style: none;margin: 0;padding-left: 10px;line-height: 38px;">
                                                                    
                                                                </ul>
                                                            </div>
                                                            <input type="hidden" id="typeIdVal" >
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="userId">主播</label>
                                                            <div id="userIdDiv" style="width: 570px;">
                                                            <input type="text" class="form-control" id="userId" name="userId" value="" placeholder="请输入主播名">
                                                            <div id="userList" style="position: fixed; width: 570px; height: 38px;background-color: white;z-index: 30;border: 1px solid;border-top: none;display: none;">
                                                                <ul id="userListlu" style="list-style: none;margin: 0;padding-left: 10px;line-height: 38px;">

                                                                </ul>
                                                            </div>
                                                            <input type="hidden" id="userIdVal" >
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label>封面上传</label>
                                                            <div class="form-controls">
                                                                <ul class="list-inline clearfix lyear-uploads-pic">
                                                                    <li class="col-xs-4 col-sm-3 col-md-2">
                                                                        <input type="file" name="upload" id="upload" style="display: none;" />
                                                                        <a class="pic-add" id="add-pic-btn" href="#!" title="点击上传"></a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="status">状态</label>
                                                            <div class="clearfix">
                                                                <label class="lyear-radio radio-inline radio-primary">
                                                                    <input type="radio" name="status" value="3"><span>禁用</span>
                                                                </label>
                                                                <label class="lyear-radio radio-inline radio-primary">
                                                                    <input type="radio" name="status" value="1" checked=""><span>启用</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default colse" data-dismiss="modal">关闭</button>
                                                        <button type="button" class="btn btn-primary" id="add">点击新增</button>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" style="display: none;">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <h4 class="modal-title" id="updateModalLabel">修改直播间</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form action="" method="post" class="row" id="formUpdata">
                                                        <div class="form-group col-md-12">
                                                            <label for="roomName1">房间标题</label>
                                                            <input type="hidden" id="roomId">
                                                            <input type="text" class="form-control" id="roomName1" name="roomName" value="" placeholder="请输入标题">
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="typeId1">房间分类</label>
                                                            <div id="typeIdDiv1" style="width: 570px;">
                                                                <input type="text" class="form-control" id="typeId1" name="typeId" value="" placeholder="关键词">
                                                                <div id="typeList1" style="position: fixed; width: 570px; height: 38px;background-color: white;z-index: 30;border: 1px solid;border-top: none;display: none;">
                                                                    <ul id="typeListlu1" style="list-style: none;margin: 0;padding-left: 10px;line-height: 38px;">

                                                                    </ul>
                                                                </div>
                                                                <input type="hidden" id="typeIdVal1" >
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="userId1">主播</label>
                                                            <div id="userIdDiv1" style="width: 570px;">
                                                                <input type="text" class="form-control" id="userId1" name="userId" value="" placeholder="请输入主播名">
                                                                <div id="userList1" style="position: fixed; width: 570px; height: 38px;background-color: white;z-index: 30;border: 1px solid;border-top: none;display: none;">
                                                                    <ul id="userListlu1" style="list-style: none;margin: 0;padding-left: 10px;line-height: 38px;">

                                                                    </ul>
                                                                </div>
                                                                <input type="hidden" id="userIdVal1" >
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label>封面上传</label>
                                                            <div class="form-controls">
                                                                <ul class="list-inline clearfix lyear-uploads-pic">
                                                                    <li class="col-xs-4 col-sm-3 col-md-2">
                                                                        <input type="file" name="upload1" id="upload1" style="display: none;" />
                                                                        <a class="pic-add" id="add-pic-btn1" href="#!" title="点击上传"></a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <label for="status1">状态</label>
                                                            <div class="clearfix">
                                                                <label class="lyear-radio radio-inline radio-primary">
                                                                    <input type="radio" name="status1" value="3"><span>禁用</span>
                                                                </label>
                                                                <label class="lyear-radio radio-inline radio-primary">
                                                                    <input type="radio" name="status1" value="1" checked=""><span>启用</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default colse" data-dismiss="modal">关闭</button>
                                                    <button type="button" class="btn btn-primary" id="updata">点击修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <%--<a class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>
                                    <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
                                    <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>--%>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>编号</th>
                                            <th>直播间名</th>
                                            <th>直播间分类</th>
                                            <th>主播</th>
                                            <th>关注数</th>
                                            <th>直播间封面</th>
                                            <th>直播间状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbodyOne">
                                        <%--<tr>
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" name="ids[]" value="1"><span></span>
                                                </label>
                                            </td>
                                            <td>1</td>
                                            <td>第01章 天涯思君不可忘</td>
                                            <td>《倚天屠龙记》</td>
                                            <td>金庸</td>
                                            <td>36</td>
                                            <td><font class="text-success">正常</font></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                    <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                </div>
                                            </td>
                                        </tr>--%>
                                        
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination">
                                    <%--<li class="disabled"><span>«</span></li>
                                    <li class="active"><span>1</span></li>
                                    <li><a href="#1">2</a></li>
                                    <li><a href="#1">3</a></li>
                                    <li><a href="#1">4</a></li>
                                    <li><a href="#1">5</a></li>
                                    <li><a href="#1">6</a></li>
                                    <li><a href="#1">7</a></li>
                                    <li><a href="#1">8</a></li>
                                    <li class="disabled"><span>...</span></li>
                                    <li><a href="#!">14452</a></li>
                                    <li><a href="#!">14453</a></li>
                                    <li><a href="#!">»</a></li>--%>
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/doushahoutai/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/doushahoutai/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/doushahoutai/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/doushahoutai/js/main.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
        $("#keyword").blur(function () {
            let key = $("#search-btn").html();
            //alert(key=="直播间 <span class=\"caret\"></span>")
            if (key=="直播间 <span class=\"caret\"></span>"){
                getRoom(1,5,$(this).val());
            }else{
                getRoom(1,5,"",$(this).val());
            }
        })
        //----------------------------------------------------------------------------------------------
        $("#typeId").keyup(function () {
            
            $.get("${pageContext.request.contextPath}/LiveController/getType",{typeName:$("#typeId").val()}
            ,function (rs) {
                    var cont= "";
                    var h =0;
                    $.each(rs.list,function (index,type) {
                        cont+="<a><li id='"+type.typeId+"'>"+type.typeName+"</li></a>";
                        h+=38;
                    });
                    $("#typeListlu").html(cont);

                    $("#typeList").css("height",h+"px");
                    $("#typeIdDiv").css("height",(h+38)+"px");
                    $("#typeList").css("display","block");
                    
                })
        });
        $(document).on("click","#typeListlu li",function () {
            $("#typeId").val($(this).html());
            $("#typeIdVal").val($(this).attr("id"));
            $("#typeIdDiv").css("height","38px");
            $("#typeList").css("height","0px");
            $("#typeList").css("display","none");
            
        })
        $("#typeIdDiv").hover(function () {

        },function () {
            $("#typeIdVal").val($("#typeListlu li").attr("id"));
            $("#typeIdDiv").css("height","38px");
            $("#typeList").css("height","0px");
            $("#typeList").css("display","none");
        })
        $("#userId").keyup(function () {

            $.get("${pageContext.request.contextPath}/LiveController/getUser",{userName:$("#userId").val()}
                ,function (rs) {
                    var cont= "";
                    var h = 0;
                    $.each(rs.list,function (index,user) {
                        cont+="<a><li id='"+user.userId+"'>"+user.userName+"</li></a>"
                        h+=38;
                    });
                    $("#userListlu").html(cont);
                    
                    $("#userList").css("height",h+"px");
                    $("#userIdDiv").css("height",(h+38)+"px");
                    $("#userList").css("display","block");

                })
        });
        
        $(document).on("click","#userListlu li",function () {
            $("#userIdDiv").css("height","38px");
            $("#userId").val($(this).html());
            $("#userIdVal").val($(this).attr("id"));

            $("#userList").css("height","0px");
            $("#userList").css("display","none");

        })
        
        $("#userIdDiv").hover(function () {

        },function () {
            $("#userIdVal").val($("#userListlu li").attr("id"));
            $("#userIdDiv").css("height","38px");
            $("#userList").css("height","0px");
            $("#userList").css("display","none");
        })
        
        //---------------------------------------------------------------------------------------
        $("#typeId1").keyup(function () {

            $.get("${pageContext.request.contextPath}/LiveController/getType",{typeName:$("#typeId1").val()}
                ,function (rs) {
                    var cont= "";
                    var h =0;
                    $.each(rs.list,function (index,type) {
                        cont+="<a><li id='"+type.typeId+"'>"+type.typeName+"</li></a>";
                        h+=38;
                    });
                    $("#typeListlu1").html(cont);

                    $("#typeList1").css("height",h+"px");
                    $("#typeIdDiv1").css("height",(h+38)+"px");
                    $("#typeList1").css("display","block");

                })
        });
        $(document).on("click","#typeListlu1 li",function () {
            $("#typeId1").val($(this).html());
            $("#typeIdVal1").val($(this).attr("id"));
            $("#typeIdDiv1").css("height","38px");
            $("#typeList1").css("height","0px");
            $("#typeList1").css("display","none");

        })
        $("#typeIdDiv1").hover(function () {

        },function () {
            $("#typeIdVal1").val($("#typeListlu1 li").attr("id"));
            $("#typeIdDiv1").css("height","38px");
            $("#typeList1").css("height","0px");
            $("#typeList1").css("display","none");
        })
        $("#userId1").keyup(function () {

            $.get("${pageContext.request.contextPath}/LiveController/getUser",{userName:$("#userId1").val()}
                ,function (rs) {
                    var cont= "";
                    var h = 0;
                    $.each(rs.list,function (index,user) {
                        cont+="<a><li id='"+user.userId+"'>"+user.userName+"</li></a>"
                        h+=38;
                    });
                    $("#userListlu1").html(cont);

                    $("#userList1").css("height",h+"px");
                    $("#userIdDiv1").css("height",(h+38)+"px");
                    $("#userList1").css("display","block");

                })
        });

        $(document).on("click","#userListlu1 a li",function () {
            
            $("#userId1").val($(this).html());
            //alert($(this).attr("id"))
            $("#userIdVal1").val($(this).attr("id"));
            $("#userIdDiv1").css("height","38px");
            $("#userList1").css("height","0px");
            $("#userList1").css("display","none");

        })

        $("#userIdDiv1").hover(function () {

        },function () {
            $("#userIdVal1").val($("#userListlu1 a li").attr("id"));
            $("#userIdDiv1").css("height","38px");
            $("#userList1").css("height","0px");
            $("#userList1").css("display","none");
        })
        
        
        
        
        //--------------------------------------------------------------------------------------------
        
        
        
        
        
        $(document).on("click","#add-pic-btn",function () {
            $('#upload').click();
        })

        $(document).on('input','#upload', function(){
            //alert(11)
            // 创建formdata对象
            var formData = new FormData();
            // 给formData对象添加<input>标签,注意与input标签的ID一致
            formData.append('file', $('#upload')[0].files[0]);
            $.ajax({
                url : '${pageContext.request.contextPath}/LiveController/upload',//这里写你的url
                type : 'POST',
                data : formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                dataType: 'json',//这里是返回类型，一般是一般是json,text等
                clearForm: true,//提交后是否清空表单数据
                success: function(result) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    //alert(result);
                    //var result = JSON.parse(data);
                    if (result.img!=null){
                        // alert(data);
                        //$("#add-pic-btn").css("display","none");
                        $("#add-pic-btn").parents("li").html("<figure>\n" +
                            "                            <img src='${pageContext.request.contextPath}/video/playVideos?videoPath="+result.img+"' alt='"+result.img
                            +"'>\n" +
                            "                            <figcaption>\n" +
                            "                              <a class=\"btn btn-round btn-square btn-danger\" href=\"#!\"><i class=\"mdi mdi-delete\"></i></a>\n" +
                            "                            </figcaption>\n" +
                            "                          </figure>");
                    }else{
                        $("#add-pic-btn").html(result.img);
                    }
                }
            })

        });

        $(document).on("click","figcaption a",function () {
            $("figure").parents("li").html("<input type=\"file\" name=\"upload1\" id=\"upload1\" style=\"display: none;\" />\n" +
                "<a class=\"pic-add\" id=\"add-pic-btn1\" href=\"#!\" title=\"点击上传\"></a>\n");
        })

        $(document).on("click","#add-pic-btn1",function () {
            $('#upload1').click();
        })

        $(document).on('input','#upload1', function(){
            //alert(11)
            // 创建formdata对象
            var formData = new FormData();
            // 给formData对象添加<input>标签,注意与input标签的ID一致
            formData.append('file', $('#upload1')[0].files[0]);
            $.ajax({
                url : '${pageContext.request.contextPath}/LiveController/upload',//这里写你的url
                type : 'POST',
                data : formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                dataType: 'json',//这里是返回类型，一般是一般是json,text等
                clearForm: true,//提交后是否清空表单数据
                success: function(result) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    //alert(result);
                    //var result = JSON.parse(data);
                    if (result.img!=null){
                        // alert(data);
                        //$("#add-pic-btn").css("display","none");
                        $("#add-pic-btn1").parents("li").html("<figure id='figs'>\n" +
                            "                            <img src='${pageContext.request.contextPath}/video/playVideos?videoPath="+result.img+"' alt='"+result.img
                            +"'>\n" +
                            "                            <figcaption id='fig' >\n" +
                            "                              <a class=\"btn btn-round btn-square btn-danger\" href=\"#!\"><i class=\"mdi mdi-delete\"></i></a>\n" +
                            "                            </figcaption>\n" +
                            "                          </figure>");
                    }else{
                        $("#add-pic-btn1").html(result.img);
                    }
                }
            })

        });

        
        $(document).on("click","#fig a",function () {
            $("figure").parents("li").html("<input type=\"file\" name=\"upload\" id=\"upload\" style=\"display: none;\" />\n" +
                "<a class=\"pic-add\" id=\"add-pic-btn\" href=\"#!\" title=\"点击上传\"></a>\n");
        })
        $("#add").click(function () {
            var form = new FormData();
            if ($("#roomName").val()!=null&&$("#roomName").val()!=""){
                form.append("roomName",$("#roomName").val());
                if($("#typeIdVal").val()!=null&&$("#typeIdVal").val()!=""){
                    form.append("typeId",$("#typeIdVal").val());
                    if($("#userIdVal").val()!=null&&$("#userIdVal").val()!=""){
                        form.append("userId",$("#userIdVal").val());
                        if ($("figure img").attr("alt")!=""&&$("figure img").attr("alt")!=null){
                            form.append("roomImg",$("figure img").attr("alt"));
                        }else{
                            return alert("图片没有上传!");
                        }
                    }else{
                        return alert("主播用户没找到或者主播没填!");
                    }
                }else{
                    return alert("分类没找到或者分类没填!");
                }
            }else{
                return alert("房间名不能空!");
            }
            
            form.append("roomState",$("[name='status']:checked").val());
            $.ajax({
                url:"${pageContext.request.contextPath}/LiveController/addRoom",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                clearForm: true,//提交后是否清空表单数据
                success:function(data){
                    if (data){
                        alert("添加成功!");
                        $("#roomName").val("")
                        $("#typeId").val("")
                        $("#userId").val("")
                        $("#typeIdVal").val("")
                        $("#userIdVal").val("")
                        //$("figure a").click();
                        $(".colse").click();
                        getRoom($(".pagination .active a").html(),5,"","");
                    }else{
                        alert("添加失败!");
                    }
                }
            });
        })
        $(document).on("click",".colse",function () {
            $("figure a").click();
            $("#figs a").click();
        });
        $(document).on("click","#updata",function () {
            var form = new FormData();
            form.append("roomId",$("#roomId").val());
            if ($("#roomName1").val()!=null&&$("#roomName1").val()!=""){
                form.append("roomName",$("#roomName1").val());
                if($("#typeIdVal1").val()!=null&&$("#typeIdVal1").val()!=""){
                    form.append("typeId",$("#typeIdVal1").val());
                    if($("#userIdVal1").val()!=null&&$("#userIdVal1").val()!=""){
                        form.append("userId",$("#userIdVal1").val());
                        if ($("#figs img").attr("alt")!=""&&$("#figs img").attr("alt")!=null){
                            form.append("roomImg",$("#figs img").attr("alt"));
                        }else{
                            return alert("图片没有上传!");
                        }
                    }else{
                        return alert("主播用户没找到或者主播没填!");
                    }
                }else{
                    return alert("分类没找到或者分类没填!");
                }
            }else{
                return alert("房间名不能空!");
            }

            form.append("roomState",$("[name='status']:checked").val());
            $.ajax({
                url:"${pageContext.request.contextPath}/LiveController/setRoom",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                clearForm: true,//提交后是否清空表单数据
                success:function(data){
                    if (data){
                        alert("修改成功!");
                        $("#roomId").val("")
                        $("#roomName1").val("")
                        $("#typeId1").val("")
                        $("#userId1").val("")
                        $("#typeIdVal1").val("")
                        $("#userIdVal1").val("")
                        
                        $(".colse").click();
                        getRoom($(".pagination .active a").html(),5,"","");
                    }else{
                        alert("修改失败!");
                    }
                }
            });
        })
        getRoom();


        //登录
        if("${sessionScope.frontUser.userId}"!=""){

            <%--alert("${sessionScope.frontUser}");--%>
            $.get("${pageContext.request.contextPath}/user/checkNameById",{
                userId:"${sessionScope.frontUser.userId}"
            },function (user) {
                var rs="<li class=\"dropdown dropdown-profile\">\n" +
                    "              <a href=\"javascript:void(0)\" data-toggle=\"dropdown\">\n" +
                    "                <img class=\"img-avatar img-avatar-48 m-r-10\" src=\"${pageContext.request.contextPath}/user/frontUserImg?userImg=${sessionScope.frontUser.userImg}\" onerror=\"this.src='${pageContext.request.contextPath}/js/liveJs/98_avatar_middle.jpg'\" alt=\"\" />\n" +
                    "                <span>"+user.userName+" <span class=\"caret\"></span></span>\n" +
                    "              </a>\n" +
                    "              <ul class=\"dropdown-menu dropdown-menu-right\">\n" +
                    "                <li> <a href=\"lyear_pages_profile.html\"><i class=\"mdi mdi-account\"></i> 个人信息</a> </li>\n" +
                    "                <li> <a href=\"lyear_pages_edit_pwd.html\"><i class=\"mdi mdi-lock-outline\"></i> 修改密码</a> </li>\n" +
                    "                <li> <a href=\"javascript:void(0)\"><i class=\"mdi mdi-delete\"></i> 清空缓存</a></li>\n" +
                    "                <li class=\"divider\"></li>\n" +
                    "                <li> <a id=\"exit\" href=\"\"><i class=\"mdi mdi-logout-variant\"></i> 退出登录</a> </li>\n" +
                    "              </ul>\n" +
                    "            </li>";
                $("#login1").html(rs);
                //退出登录
                $(document).on("click","#exit",function () {

                    $.ajax({
                        async:true,
                        type:"GET",
                        url:"${pageContext.request.contextPath}/user/exit",

                        success:function(data){
                            //var content="";
                            window.location.href="${pageContext.request.contextPath}/front/login.jsp";
                            //content = "<a class=\"public-DropMenu-link\" href=\" ${pageContext.request.contextPath}/front/login.jsp\" target=\"_blank\"  style=\"margin-top: 21px;\"><span>登录</span></a>";
                            //填充到指定的标签中
                            //$("#login1").html(content);


                        }
                    });
                });

            });

        }

    });

    var max = 9;
    var min = 1;
    function getRoom(pageNo,pageSize,roomName,anchor) {
        $.getJSON("${pageContext.request.contextPath}/LiveController/getRoomPage",
            {
                anchor:anchor,
                roomName:roomName,
                pageNo:pageNo,
                pageSize:pageSize
            }
            ,function (rs) {
                var cont = "";//
                $.each(rs.list,function (index,room) {
                    cont+="<tr>\n" +
                        "                                            <td>\n" +
                        "                                                <label class=\"lyear-checkbox checkbox-primary\">\n" +
                        "                                                    <input type=\"checkbox\" name=\"ids[]\" value=\"1\"><span></span>\n" +
                        "                                                </label>\n" +
                        "                                            </td>\n" +
                        "                                            <td>"+room.roomId+"</td>\n" +
                        "                                            <td>"+room.roomName+"</td>\n" +
                        "                                            <td>"+room.typeId.typeName+"</td>\n" +
                        "                                            <td>"+room.userId.userName+"</td>\n" +
                        "                                            <td>"+room.concernNum+"</td>\n" +
                        "                                            <td>"+room.roomImg+"</td>\n" +
                        "                                            <td><font class=\"text-success\">"+(room.roomState==1?"未直播":room.roomState==2?"直播中":"禁用")+"</font></td>\n" +
                        "                                            <td>\n" +
                        "                                                <div class=\"btn-group\">\n" +
                        "                                                    <a class=\"btn btn-xs btn-default\" href=\"#!\" title=\"编辑\" id='updataShow'  data-toggle=\"modal\" data-target=\"#updateModal\" data-room = \'"+JSON.stringify(room)+"\' onclick=\"updata()\"><i class=\"mdi mdi-pencil\"></i></a>\n" +
                        "                                                    <a class=\"btn btn-xs btn-default\" href=\"#!\" title=\"删除\" data-toggle=\"tooltip\" onclick=\"del('"+room.roomId+"')\"><i class=\"mdi mdi-window-close\"></i></a>\n" +
                        "                                                </div>\n" +
                        "                                            </td>\n" +
                        "                                        </tr>";
                })
                if (rs.pageNum > max&&rs.pageNum <=rs.pages){
                    min=min+max;
                    max=max+9;
                    if (max > rs.pages){
                        max = rs.pages;
                    }
                    getGiftRecord(rs.pageNum);
                }
                //alert(rs.pageNum < min)
                if (rs.pageNum < min&&rs.pageNum >= 1){
                    max=min-1;
                    min=min-9;
                    getGiftRecord(rs.pageNum);
                }
                var pageCont="";
                if (rs.isFirstPage){
                    pageCont+="<li class=\"disabled\"><span>首页</span></li>"
                }else{
                    pageCont+="<li><a href=\"#!\" onclick='getRoom("+1+")'>首页</a></li>"
                }
                if (!rs.hasPreviousPage){
                    pageCont+="<li class=\"disabled\"><span>«</span></li>"
                }else{
                    pageCont+="<li><a href=\"#!\" onclick='getRoom("+rs.prePage+")'>«</a></li>"
                }
                for (let i = 1; i <= rs.pages; i++) {
                    if (i==rs.pageNum){
                        pageCont+="<li class=\"active\"><a href=\"#!\" onclick='getRoom("+i+")'>"+i+"</a></li>"
                    }else{
                        pageCont+="<li><a href=\"#!\" onclick='getRoom("+i+")'>"+i+"</a></li>"
                    }
                }
                if (max < rs.pages){
                    pageCont+="<li ><a href=\"#!\" onclick='getGiftRecord("+(max+1)+")'>...</a></li>"
                }
                if (!rs.hasNextPage){
                    pageCont+="<li class=\"disabled\"><span>»</span></li>"
                }else{
                    pageCont+="<li><a href=\"#!\" onclick='getRoom("+rs.nextPage+")'>»</a></li>"
                }
                if (rs.isLastPage){
                    pageCont+="<li class=\"disabled\"><span>末页</span></li>"
                }else{
                    pageCont+="<li><a href=\"#!\" onclick='getRoom("+rs.pages+")'>末页</a></li>"
                }
                $(".pagination").html(pageCont);
                $("#tbodyOne").html(cont);
            })
    }

    function del(id) {
        if(confirm("是否确认删除?")){
            $.getJSON("${pageContext.request.contextPath}/LiveController/delRoom",{roomId:id},
            function (data) {
                if (data){
                    alert("删除成功!")
                    getRoom()
                }else{
                    alert("删除失败!")
                    getRoom()
                }
            });
        }
    }
    $(document).on("click","#updataShow",function () {
        var room = $(this).data("room");
        //var room = JSON.parse(json);
        //alert(room);
        $("#roomId").val(room.roomId);
        $("#roomName1").val(room.roomName);
        $("#typeId1").val(room.typeId.typeName);
        $("#userId1").val(room.userId.userName);
        $("#typeIdVal1").val(room.typeId.typeId);
        $("#userIdVal1").val(room.userId.userId);
        $("#add-pic-btn1").parents("li").html("<figure id='figs'>\n" +
            "                            <img src='${pageContext.request.contextPath}/video/playVideos?videoPath="+room.roomImg+"' alt='"+room.roomImg
            +"'>\n" +
            "                            <figcaption id='fig' >\n" +
            "                              <a class=\"btn btn-round btn-square btn-danger\" href=\"#!\"><i class=\"mdi mdi-delete\"></i></a>\n" +
            "                            </figcaption>\n" +
            "                          </figure>");
    })
</script>
</body>
</html>